<template>
  <view class="controller">
    <view class="" :style="'margin-top:'+($xyfun.xysys().buttonBound.top)+'px;'">
      <view class="navBarTit">
        <view class="yz-iconfont yz-jiantou1" @tap="$xyfun.back()"></view>
        <text>{{cate_name}}</text>
      </view>
    </view>
    <view class="lists">
      <news-row v-for="(val,idx) in lists" :item="val"></news-row>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import newsRow from "@/components/news/row.vue"
import xyEmpty from "@/components/xy-empty/index.vue";
import xyTitle from "@/components/xy-title/index.vue";

export default {
  components: {newsRow,xyEmpty,xyTitle},
  data() {
    return {
      id: '',
      lists: [],
      isEmpty: true,
      currentPage: 1,
      lastPage: 1,
      cate_name: ''
    };
  },
  computed: {
    ...mapState(['common'])
  },

  async onLoad(options) {
    if(options?.id){
      this.id = options.id;
    }
    this.loadData();


  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.lists = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData() {
      this.$api.postBase({
        url: 'news/lists',
        loadingTip: '加载中...',
        data: {
          cate_id : this.id,
          page: this.currentPage,
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.cate_name = res.cate_name;
          res = res.data;
          this.lists = [...this.lists,...res.data];
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;

        }
      })
    },
  }
}
</script>

<style>
page{

}
</style>
<style lang="scss">
.controller{

}
.lists{
  padding: 30rpx;
}
</style>
